import {fileURLToPath, URL} from 'node:url'

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from "@vitejs/plugin-vue-jsx";
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import {visualizer} from 'rollup-plugin-visualizer';
import UnoCSS from 'unocss/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import VITE_DROP_CONSOLE from './package.json';
import viteCompression from 'vite-plugin-compression';
import pxToViewport from 'postcss-px-to-viewport';

// https://vitejs.dev/config/
export default defineConfig(({command, mode}) => {
    const env = loadEnv(mode, process.cwd())
    console.log('env', env)
    return {
        define: {
            // enable hydration mismatch details in production build
            __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
        },
        server: {port: 8089},
        plugins: [
            //开启gzip
            viteCompression({
                //生成压缩包gz
                verbose: false,
                disable: false,
                threshold: 10240,
                algorithm: 'gzip',
                ext: '.gz',
            }),
            vue(),
            vueJsx(),
            AutoImport({
                resolvers: [NaiveUiResolver()],
                include: [
                    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
                    /\.vue$/,
                    /\.vue\?vue/, // .vue
                    /\.md$/ // .md
                ],
                imports: [
                    'vue',
                    'vue-router',
                    'pinia',
                    {
                        'naive-ui': [
                            'useDialog',
                            'useMessage',
                            'useNotification',
                            'useLoadingBar'
                        ]
                    }
                ]
            }),
            visualizer({
                emitFile: true,//是否被触摸
                filename: "test.html",//生成分析网页文件名
                open: true,//在默认用户代理中打开生成的文件
                gzipSize: true,//从源代码中收集 gzip 大小并将其显示在图表中
                brotliSize: true,//从源代码中收集 brotli 大小并将其显示在图表中
            }),
            Components({
                resolvers: [NaiveUiResolver()]
            }),
            UnoCSS()
        ],
        css: {
            postcss: {
                plugins: [
                    pxToViewport({
                        unitToConvert: 'px', // 需要做转换的单位，默认为"px"
                        viewportWidth: 11520, // 设计稿的视口宽度
                        viewportHeight: 2656, // 设计稿的视口高度
                        minPixelValue: 2, // 最小的转换数值，如果为2则会转换2px以上的数值
                        mediaQuery: true, // 允许在媒体查询中转换px
                        unitPrecision: 6, // 转换后的精度，即小数点位数
                        propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
                        viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
                        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
                        selectorBlackList: ["ignore-", ], // 指定不转换为视窗单位的类名，
                        replace: false, // 是否转换后直接更换属性值
                        exclude: [/node_modules/, ], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件,数组中写正则
                        landscape: false, // 是否处理横屏情况
                    })
                ]
            }
        },
        base: env.VITE_APP_BASE_URL,
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url))
            }
        },
        html: {
            title: '动态标题'
        },
        // 构建配置
        build: {
            minify: 'esbuild',
            outDir: 'dist',
            chunkSizeWarningLimit: 1500,
            rollupOptions: {
                output: { // 输出重构  打包编译后的 文件目录 文件名称 【模块名称.时间戳】
                    // 入口文件名
                    entryFileNames: `assets/js/[name]-[hash].js`,
                    // 块文件名
                    chunkFileNames: `assets/js/[name]-[hash].js`,
                    // 资源文件名 css 图片等等
                    assetFileNames: `assets/[ext]/[name]-[hash].[ext]`,
                    // 解决打包时Some chunks are larger警告
                    manualChunks(id) {
                        if (id.includes('node_modules')) {
                            return id
                                .toString()
                                .split('node_modules/')[1]
                                .split('/')[0]
                                .toString()
                        }
                    },

                },
            },
        },
        // 删除console
        esbuild: {
            drop: VITE_DROP_CONSOLE ? ['console', 'debugger'] : []
        },
    }
})
